<template>

  <div class="reading">

<meta name="referrer" content="no-referrer" />
        <div class="header">
            <router-link tag="div" class="back" to="/home">
                <svg t="1667983847533" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2541" width="200" height="200"><path d="M624.788992 204.047974 585.205965 164.464026 219.560038 530.185011 585.205965 895.864013 624.788992 856.280986 298.663014 530.16105Z" p-id="2542"></path></svg>
            </router-link>
            <div class="wenzi">预告</div>
            <div class="all">全集</div>
        </div>


        <!-- 漫画 -->
        <div class="body">
            
            <div class="imgs" v-for="(item,index) in bianli" :key="index">
                <img :src="item" alt="">
            </div>
        </div>


        <div class="zanlike">
            <div class="zan" @click="dianzan">
                <div class="svg" v-show="!zanok">
                    <svg t="1667996868176" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2708" width="200" height="200"><path d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667z" p-id="2709" fill="#8a8a8a"></path></svg>
                </div>
                <!-- 点过赞 -->
                <div class="svg" v-show="zanok">
                    <svg t="1667997397788" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5024" width="200" height="200"><path d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667z" p-id="5025" fill="#f4ea2a"></path></svg>
                </div>
                <div class="num">
                    赞{{zan}}
                </div>
            </div>
            <div class="like" @click="dianlike">
                <div class="svg" v-show="!likeok">
                    <svg t="1668168993202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2690" width="200" height="200"><path d="M694.458729 94.568729H285.285342c-1.439819 0-2.857274 0.135897-4.226564 0.426613-36.059112 1.489705-69.118172 21.225712-87.049676 52.272123-0.509183 0.88591-0.946117 1.816545-1.322844 2.762662-3.863599 9.710604-94.969538 238.958276-113.169396 306.865419-21.057132 78.562144 25.742993 159.6444 104.367064 180.710132 11.539191 3.101545 23.671856 4.532762 38.083803 4.532762l98.698961 0.387048c-12.242758 55.920695-14.301854 139.81034-14.301854 189.818662 0 58.124289 47.286945 105.397472 105.397472 105.397472 58.110527 0 105.395752-47.271463 105.395752-105.397472v-21.093256c0-105.820644 78.410765-193.661619 180.175146-208.536303a22.782506 22.782506 0 0 1-2.874477-11.071293V94.568729z m138.888306 0h-89.291115v497.072848c0 3.127348-0.64852 6.108478-1.797623 8.840177h91.088738c46.497367 0 84.302495-37.830932 84.302495-84.328299V178.886706c0-46.499087-37.803409-84.317977-84.302495-84.317977z" p-id="2691" fill="#8a8a8a"></path></svg>
                </div>
                <!-- 踩过 -->
                <div class="svg" v-show="likeok">
                    <svg t="1668169088242" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2690" width="200" height="200"><path d="M694.458729 94.568729H285.285342c-1.439819 0-2.857274 0.135897-4.226564 0.426613-36.059112 1.489705-69.118172 21.225712-87.049676 52.272123-0.509183 0.88591-0.946117 1.816545-1.322844 2.762662-3.863599 9.710604-94.969538 238.958276-113.169396 306.865419-21.057132 78.562144 25.742993 159.6444 104.367064 180.710132 11.539191 3.101545 23.671856 4.532762 38.083803 4.532762l98.698961 0.387048c-12.242758 55.920695-14.301854 139.81034-14.301854 189.818662 0 58.124289 47.286945 105.397472 105.397472 105.397472 58.110527 0 105.395752-47.271463 105.395752-105.397472v-21.093256c0-105.820644 78.410765-193.661619 180.175146-208.536303a22.782506 22.782506 0 0 1-2.874477-11.071293V94.568729z m138.888306 0h-89.291115v497.072848c0 3.127348-0.64852 6.108478-1.797623 8.840177h91.088738c46.497367 0 84.302495-37.830932 84.302495-84.328299V178.886706c0-46.499087-37.803409-84.317977-84.302495-84.317977z" p-id="2691" fill="#d81e06"></path></svg>
                </div>
                <div class="do">
                    踩过
                </div>
            </div>
        </div>

        <!-- 评论 -->
        <div class="pinglun">
            <div class="hhh">
                热门评论
            </div>
            <div class="body">
                <div class="item" v-for="(item,index) in this.plun" :key="index">
                    <div class="theypc">
                        <img :src="item.imgs" alt="">
                    </div>
                    <div class="ri">
                        <div class="name">{{item.name}}</div>
                        <div class="time">{{item.time}}</div>
                        <div class="conter">{{item.cont}}</div>
                    </div>
                </div>
                <div class="item" v-for="(item,index) in mysay" :key="index">
                    <div class="theypc">
                        <img src="../assets/imgs/个人头像.jpg" alt="">
                    </div>
                    <div class="ri">
                        <div class="name">林凯琦</div>
                        <div class="time">08-04</div>
                        <div class="conter">{{item}}</div>
                    </div>
                </div>
            </div>
            
        </div>

        <!-- 我说 -->
        <div class="mysay" v-show="xx">
            <input type="text" placeholder="输入你要说的话" v-model="speak" @keyup.enter="send">
        </div>

        <div class="under">
            <div class="le" @click="shuo">评论</div>
            <div class="ri">
                <div class="qian" @click="prev">上一章</div>
                <div class="hou" @click="next">下一章</div>
            </div>
        </div>
  </div>
</template>

<script>
import { getHomeData } from "../api/booklists"
export default {
    data(){
        return{
            homeman:null,
            lists:'',
            id:null,
            bianli:[],
            onezhang:[],
            speak:'',
            mysay:[],
            xx:false,
            zanok:false,
            likeok:false,
            zan:null,
            plun:null,
            kkbwatch:null
        }
    },
    methods:{
        send(){
            this.mysay.push(this.speak)
            this.speak = "",
            console.log(this.mysay)
        },
        shuo(){
            this.xx=!this.xx
        },
        dianzan(){
            this.zanok=!this.zanok
            if(this.zanok==true){
                this.zan+=1
            }else{
                this.zan-=1
            }
        },
        dianlike(){
            this.likeok=!this.likeok
        },
        next(){
            this.bianli = this.twozhang
        },
        prev(){
            this.bianli = this.onezhang
        }
        
    },
    created(){
        getHomeData().then((data)=>{
            this.homeman = data.homeman
            
            let index = this.homeman.findIndex(item=>item.id==this.$route.query.id);
            this.lists=this.homeman[index];
            this.zan = this.lists.zan
            console.log(this.zan)

            this.onezhang = this.lists.onezhang
            this.twozhang = this.lists.twozhang
            this.kkbwatch = this.lists.kkbwatch
            this.bianli = this.onezhang
            this.plun = this.lists.plun
            console.log(this.plun)


            console.log(this.lists)
        })
    }
}
</script>

<style lang="scss">
.reading .mysay{
    position: fixed;
    bottom: 40px;
    left: 5%;
    width: 90%;
    height: 30px;
    color: #000;
    input{
        width: 100%;
        border: none;
        outline: none;
        margin: 0 auto;
        background-color: #dfdfdf;
        text-indent: 20px;
        border-radius: 15px;
        height: 100%;
    }
}
.reading .pinglun{
    width: 100%;
    height: 260px;
    .hhh{
        width: 100%;
        border-left: 5px solid #f4bc45;
        font-size: 26px;
        line-height: 26px;
        margin-left: 20px;
        color: #666666;
        font-weight: bold;
    }
    .body{
        width: 100%;
        
        .item{
            display: flex;
            width: 100%;
            border-bottom: 1px solid #dfdfdf;
            padding-bottom: 20px;
            .theypc{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            margin-left: 20px;
            img{
                width: 100%;
            }
        }
        .ri{
            margin-left: 20px;
            flex: 1;
            .name{
                font-size: 16px;
                font-weight: bold;
            }
            .time{
                font-size: 12px;
                color: #dfdfdf;
            }
            .conter{
                color: #999;
                font-size: 14px;
            }
        }
        }
    }
}
.reading .zanlike{
    margin-top: 50px;
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: space-around;
    color: #8a8a8a;
    .zan{
        display: flex;
        flex-direction: column;
        justify-content: center;
        .svg{
            width: 40px;
            height: 40px;
            svg{
                width: 40px;
                height: 40px;
            }
        }
        .num{
            font-size: 14px;
        }
    }
    .like{
        display: flex;
        flex-direction: column;
        justify-content: center;
        .svg{
            width: 40px;
            height: 40px;
            svg{
                width: 40px;
                height: 40px;
            }
    }
    }
}
.reading .body{
    padding: 50px 0;
    width: 100%;
    .imgs{
        width: 100%;
        img{
            width: 100%;
        }
    }
}
.reading .under{
    width: 90%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0px;
    left: 5%;
    .le{
        padding: 2px 10px;
        font-size: 12px;
        background-color: rgba($color: #000000, $alpha: 0.5);
        border-radius: 20px;
    }
    .ri{
        width: 30%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .qian{
            padding: 2px 5px;
            font-size: 12px;
            color: #fff;
            background-color: rgba($color: #000, $alpha: 0.5);
            border-radius: 20px;
        }
        .hou{
            padding: 2px 5px;
            font-size: 12px;
            color: #fff;
            background-color: rgba($color: #000, $alpha: 0.5);
            border-radius: 20px;
        }
    }
}
.reading{
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: scroll;
}
.reading .header{
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: #fff;
    .back{
        width: 20px;
        height: 20px;
        margin-left: 20px;
        svg{
            width: 100%;
            height: 100%;
        }
    }
    .wenzi{
        flex: 1;
        height: 100%;
        line-height: 50px;
        font-size: 14px;
        text-align: center;
    }
    .all{
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin-right: 10px;
    }
}
</style>